<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>7.极坐标绘制图案-小试牛刀-随机剪纸图案</title>
    <style>
        canvas{
            border:1px solid #aaa;
            margin: 0 auto;
            display: block;
        }
    </style>
</head>
<body>
    <canvas width="554" height="554"></canvas>
    <script src="/common/lib/gl-renderer.js"></script>
    <script type="module">
        import { loadImage, toPolar, fromPolar } from "/common/lib/utils.js";
        
        /**
         * gl-renderer五步法
         * 1.创建renderer对象
         * 2.创建并启用webgl程序
         * 3.设置uniform变量
         * 4.将定点数据送入缓冲区
         * 5.渲染
         * 
        */
        // 1.
        let canvas = document.querySelector("canvas");
        const renderer = new GlRenderer(canvas);

        // 2.
        const vertex = `
            attribute vec2 a_vertexPosition;
            attribute vec2 uv;
            varying vec2 vUv;

            void main(){
                gl_PointSize = 1.0;
                vUv = uv;
                gl_Position = vec4(a_vertexPosition, 1.0, 1.0);
            }
        `
        const fragment = `
            #ifdef GL_ES
            precision mediump float;
            #endif

            uniform float num;
            uniform float u_scale;
            uniform float u_offset;
            varying vec2 vUv;

            float line_distance(in vec2 st, in vec2 a, in vec2 b) {
                vec3 ab = vec3(b - a, 0);
                vec3 p = vec3(st - a, 0);
                float l = length(ab);
                return cross(p, normalize(ab)).z;
            }

            float seg_distance(in vec2 st, in vec2 a, in vec2 b) {
                vec3 ab = vec3(b - a, 0);
                vec3 p = vec3(st - a, 0);
                float l = length(ab);
                float d = abs(cross(p, normalize(ab)).z);
                float proj = dot(p, ab) / l;
                if(proj >= 0.0 && proj <= l) return d;
                return min(distance(st, a), distance(st, b));
            }

            float triangle_distance(in vec2 st, in vec2 a, in vec2 b, in vec2 c) {
                float d1 = line_distance(st, a, b);
                float d2 = line_distance(st, b, c);
                float d3 = line_distance(st, c, a);

                if(d1 >= 0.0 && d2 >= 0.0 && d3 >= 0.0 || d1 <= 0.0 && d2 <= 0.0 && d3 <= 0.0) {
                    return min(abs(d1), min(abs(d2), abs(d3))); // 内部距离为负
                }
                
                return -min(seg_distance(st, a, b), min(seg_distance(st, b, c), seg_distance(st, c, a))); // 外部为正
            }

            float random (vec2 st) {
                return fract(sin(dot(st.xy,
                                    vec2(12.9898,78.233)))*
                    43758.5453123);
            }

            vec2 polar(vec2 st){
                // 极径跟弧度
                return vec2(length(st), atan(st.y, st.x));
            }
            
            void main() {
                vec2 uv = fract(vUv * 10.0);
                vec2 st = uv - vec2(0.5);
                st = polar(st);
                float r = random(floor(vUv * 10.0));
                float d;
                if(r < 0.5)
                    d = u_scale * abs(cos(st.y * num * r)) - st.x;
                else{
                    d = triangle_distance(uv, vec2(0.3), vec2(0.5, 0.7), vec2(0.7, 0.3));
                }

                float gb = 1.0 - smoothstep(-0.01, 0.01, d);
                gl_FragColor.rgb = vec3(1.0, vec2(gb));
                gl_FragColor.a = 1.0;
            }
        `
        const program = renderer.compileSync(fragment,vertex)
        renderer.useProgram(program)
        // 3.
        renderer.uniforms.num = 5
        renderer.uniforms.u_scale = 0.5
        renderer.uniforms.u_offset = 0.5
        // 4.
        renderer.setMeshData([
            {
                positions:[
                    [-1,-1],
                    [-1,1],
                    [1,1],
                    [1,-1],
                ],
                attributes:{
                    uv:[
                        [0,0],
                        [0,1],
                        [1,1],
                        [1,0],
                    ]
                },
                cells:[[0,1,2],[2,0,3]]
            }
        ])
        // 5.
        renderer.render()

    </script>
</body>
</html>